<template>
  <div class="uav-outbound-detail-page">
    <div class="banner">
      <div class="banner-content">
        <img class="logo" src="@/assets/photoes/logo.jpg" alt="logo" />
        <div class="banner-title">铁岭电网无人机管理平台</div>
      </div>
      <img class="banner-bg" src="@/assets/background.png" alt="banner" />
    </div>
    <div class="detail-section">
      <div class="back-btn-section">
        <el-button class="back-btn" :icon="ArrowLeft" @click="goBack">返回</el-button>
      </div>
      <div class="detail-container">
        <div class="detail-header">
          <h2 class="detail-title">出库无人机详情</h2>
        </div>
        <el-skeleton v-if="loading" :loading="loading" :rows="8" style="padding: 20px" />
        <div v-else class="uav-details">
          <div class="detail-grid">
            <div class="detail-item">
              <div class="detail-label">
                <i class="el-icon-document"></i>无人机名称
              </div>
              <div class="detail-value">{{ uavData.uavName || "暂无" }}</div>
            </div>
            <div class="detail-item">
              <div class="detail-label"><i class="el-icon-cpu"></i>型号</div>
              <div class="detail-value">{{ uavData.uavType || "暂无" }}</div>
            </div>
            <div class="detail-item">
              <div class="detail-label"><i class="el-icon-edit"></i>外观</div>
              <div class="detail-value">
                {{ uavData.uavExterior || "暂无" }}
              </div>
            </div>
            <div class="detail-item">
              <div class="detail-label">
                <i class="el-icon-location"></i>仓库
              </div>
              <div class="detail-value">
                {{ uavData.warehouseName || "暂无" }}
              </div>
            </div>
            <div class="detail-item">
              <div class="detail-label">
                <i class="el-icon-check"></i>是否需要维护
              </div>
              <div class="detail-value">
                {{ uavData.isMaintenance === "1" ? "是" : "否" }}
              </div>
            </div>
            <div class="detail-item" v-if="uavData.uavPhoto">
              <div class="detail-label">
                <i class="el-icon-picture-outline"></i>图片
              </div>
              <div class="detail-value">
                <el-image :src="getUavImageUrl(uavData.uavPhoto)" style="width: 200px; height: 200px" fit="contain"
                  :preview-src-list="[getUavImageUrl(uavData.uavPhoto)]" />
              </div>
            </div>
          </div>
          <div class="approve-actions">
            <div class="remarks-section">
              <div class="remarks-label">
                <i class="el-icon-edit"></i>出库审批备注
              </div>
              <el-input v-model="remarks" type="textarea" placeholder="请输入出库审批备注（可选）" :rows="3" maxlength="200"
                show-word-limit class="remarks-input" />
            </div>
            <div class="action-buttons center-buttons">
              <el-button type="success" size="large" class="approve-btn" @click="handleApprove">
                <i class="el-icon-check"></i>
                通过
              </el-button>
              <el-button type="danger" size="large" class="reject-btn" @click="handleReject">
                <i class="el-icon-close"></i>
                驳回
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <footer class="footer">
      <div class="footer-top">
        <div class="footer-logo">
          <img src="../../assets/photoes/logo.jpg" alt="logo" />
          <span class="system-name">铁岭电网无人机管理平台</span>
        </div>
        <div class="contact-info">
          <div class="contact-item">
            <img src="../../assets/photoes/home/phone.png" class="size-img" />
            <p>010-62092911</p>
          </div>
          <div class="contact-item">
            <img src="../../assets/photoes/home/message.png" class="size-img" />
            <p>ZCQS@BNU.EDU.CN</p>
          </div>
        </div>
        <div class="qrcode">
          <img src="../../assets/photoes/home/qrcode.png" alt="qrcode" />
          <p>扫一扫关注我们</p>
        </div>
      </div>
      <div class="footer-bottom">
        <p>
          京公网安备 11010502031377 Copyright © 2005 ALL RIGHTS RESERVED
          XXXXX有限公司版权所有
        </p>
      </div>
    </footer> -->
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import {
  ElMessage,
  ElSkeleton,
  ElButton,
  ElImage,
  ElInput,
} from "element-plus";
import { ArrowLeft } from "@element-plus/icons-vue";
import axios from "axios";
const router = useRouter();
const route = useRoute();
const loading = ref(true);
const uavData = ref({});
const remarks = ref("");
function getUavImageUrl(base64) {
  if (!base64) return "";
  try {
    if (base64.startsWith("/9j/")) {
      return "data:image/jpeg;base64," + base64;
    }
    return base64;
  } catch {
    return "";
  }
}
function goBack() {
  router.push({ path: "/warehouse", query: { tab: "outbound" } });
}
function handleApprove() {
  // 审批通过逻辑，调用接口/tielingpowergriduavservice/task/update，status=4
  const formData = new FormData();
  formData.append("id", route.query.taskId);
  formData.append("status", "4");
  formData.append("remarks", remarks.value || "出库审批通过");
  axios
    .post("/tielingpowergriduavservice/task/update", formData)
    .then((res) => {
      if (res.data.code === 200) {
        ElMessage.success("审批通过成功");
        router.back();
      } else {
        ElMessage.error("审批失败：" + (res.data.message || res.data.msg));
      }
    })
    .catch((error) => {
      ElMessage.error(
        "请求异常：" + (error.response?.data?.message || error.message)
      );
    });
}
function handleReject() {
  // 审批驳回逻辑，调用接口/tielingpowergriduavservice/task/update，status=5
  const formData = new FormData();
  formData.append("id", route.query.taskId);
  formData.append("status", "5");
  formData.append("remarks", remarks.value || "出库审批驳回");
  axios
    .post("/tielingpowergriduavservice/task/update", formData)
    .then((res) => {
      if (res.data.code === 200) {
        ElMessage.success("驳回成功");
        router.back();
      } else {
        ElMessage.error("驳回失败：" + (res.data.message || res.data.msg));
      }
    })
    .catch((error) => {
      ElMessage.error(
        "请求异常：" + (error.response?.data?.message || error.message)
      );
    });
}
onMounted(async () => {
  const uavId = route.query.uavId;
  if (!uavId) {
    ElMessage.error("缺少无人机ID");
    goBack();
    return;
  }
  try {
    const res = await axios.get("/tielingpowergriduavservice/uav/get", {
      params: { id: uavId },
    });
    if (res.data && res.data.code === 200) {
      uavData.value = res.data.data;
    } else {
      ElMessage.error(res.data?.message || "获取无人机详情失败");
    }
  } catch (e) {
    ElMessage.error("请求无人机详情异常");
  } finally {
    loading.value = false;
  }
});
</script>
<style scoped>
.uav-outbound-detail-page {
  min-height: 100vh;
  background: #f8fafd;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.banner {
  position: relative;
  width: 100%;
  height: 220px;
  background: #199893;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.banner-content {
  position: absolute;
  left: 60px;
  top: 40px;
  z-index: 2;
  display: flex;
  align-items: center;
}

.logo {
  width: 200px;
  height: 50px;
  margin-right: 18px;
}

.banner-title {
  color: #fff;
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 2px;
}

.banner-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
}

.detail-section {
  width: 90%;
  margin: 60px 30px;
  padding: 0;
}

.back-btn-section {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 20px;
}

.back-btn {
  font-size: 16px;
  padding: 10px 28px;
  border-radius: 22px;
  background: linear-gradient(90deg, #199893 0%, #4fd1c5 100%);
  color: #fff;
  box-shadow: 0 2px 12px rgba(25, 152, 147, 0.1);
  border: none;
  transition: background 0.2s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.back-btn:hover {
  background: linear-gradient(90deg, #12706b 0%, #199893 100%);
  box-shadow: 0 4px 16px rgba(25, 152, 147, 0.18);
}

.detail-container {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(25, 152, 147, 0.08);
  padding: 40px;
  min-height: 400px;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f1f5f9;
}

.detail-title {
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
  display: flex;
  align-items: center;
}

.detail-title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 24px;
  background-color: #3498db;
  margin-right: 12px;
  border-radius: 2px;
}

.uav-details {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.detail-item {
  background: #f8fafc;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.detail-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

.detail-label {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  margin-bottom: 8px;
}

.detail-label i {
  margin-right: 8px;
  font-size: 16px;
  color: #199893;
}

.detail-value {
  font-size: 16px;
  color: #1e293b;
  font-weight: 500;
  line-height: 1.5;
}

.approve-actions {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}

.remarks-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.remarks-label {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: #2c3e50;
}

.remarks-label i {
  margin-right: 8px;
  font-size: 18px;
  color: #199893;
}

.remarks-input {
  width: 100%;
}

.action-buttons {
  display: flex;
  gap: 15px;
}

.center-buttons {
  justify-content: center;
  display: flex;
}

.approve-btn {
  background: linear-gradient(90deg, #199893 0%, #4fd1c5 100%);
  color: #fff;
  box-shadow: 0 2px 12px rgba(25, 152, 147, 0.1);
  border: none;
  transition: background 0.2s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.approve-btn:hover {
  background: linear-gradient(90deg, #12706b 0%, #199893 100%);
  box-shadow: 0 4px 16px rgba(25, 152, 147, 0.18);
}

.reject-btn {
  background: linear-gradient(90deg, #e74c3c 0%, #c0392b 100%);
  color: #fff;
  box-shadow: 0 2px 12px rgba(231, 76, 60, 0.1);
  border: none;
  transition: background 0.2s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.reject-btn:hover {
  background: linear-gradient(90deg, #c0392b 0%, #e74c3c 100%);
  box-shadow: 0 4px 16px rgba(231, 76, 60, 0.18);
}

.footer {
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 40px 0;
  margin-top: 60px;
}

.footer-top {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 20px;
}

.footer-logo {
  display: flex;
  align-items: center;
}

.footer-logo img {
  width: 150px;
  height: 40px;
  margin-right: 15px;
}

.system-name {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
}

.contact-info {
  display: flex;
  gap: 30px;
}

.contact-item {
  display: flex;
  align-items: center;
}

.contact-item .size-img {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.contact-item p {
  margin: 0;
  font-size: 14px;
  color: #ccc;
}

.qrcode {
  text-align: center;
}

.qrcode img {
  width: 120px;
  height: 120px;
  margin-bottom: 10px;
}

.qrcode p {
  margin: 0;
  font-size: 14px;
  color: #ccc;
}

.footer-bottom {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #444;
}

.footer-bottom p {
  margin: 0;
  font-size: 12px;
  color: #999;
}
</style>
